<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>经典必备的jQuery代码片段技巧合集</title>
</head>

<body>
<p style="color: #69F; text-align: center; font-size: 18px; font-weight: bold;">经典必备的jQuery代码片段技巧合集</p>
<p>参考网址：<br />
<a href="http://www.cnblogs.com/dwzjs/archive/2011/09/20/2182183.html">http://www.cnblogs.com/dwzjs/archive/2011/09/20/2182183.html</a>：50个必备的实用jQuery代码段<br />
<a href="http://www.cnblogs.com/ToDoToTry/archive/2011/08/23/2150430.html">http://www.cnblogs.com/ToDoToTry/archive/2011/08/23/2150430.html</a>：50个jQuery代码段帮你成为更好的JavaScript开发者</p>
<p><strong>1、如何修改jQuery的Ajax默认编码（例如默认UTF-8改成GB2312）：</strong></p>
<p>$.ajaxSetup({<br />
ajaxSettings:{ contentType:&quot;application/x-www-form-urlencoded;chartset=GB2312&quot;}<br />
});</p>
<p><strong>2、如何把函数绑定到事件上：</strong></p>
<p>//方法一<br />
  $('#eid').click(function(event) {<br />
  alert('你单击了eid元素');<br />
  });<br />
  //方法二, 支持动态传参<br />
  $('#eid').bind('click', {test1:&quot;abc&quot;, test2:&quot;123&quot;}, function(event) {<br />
  alert('你单击了eid元素，且传参有：' + event.data.test1 + event.data.test2 );<br />
});</p>
<p><strong>3、如何验证某个元素是否为空：</strong>例如：&lt;span id=&quot;eid&quot;&gt;&lt;/span&gt;为空元素。</p>
<p>// 方法一<br />
  if (! $('#eid').html()) {<br />
  //确实为空元素<br />
  }<br />
  // 方法二<br />
  if ($('#eid').is(&quot;:empty&quot;)) {<br />
  //确实为空元素<br />
}</p>
<p><strong>4、使用双反斜杠获取属性值中含有小数点.的元素：</strong></p>
<p>&lt;input type=&quot;text&quot; id=&quot;student.sid&quot; /&gt;</p>
<p>错误用法：$(&quot;#student.sid&quot;)<br />
正确用法：$(&quot;#student\\.sid&quot;)</p>
<p><strong>5、如何隐藏一个包含了某个文本值的元素：</strong></p>
<p>//所有含有abcd文本的div元素都将隐藏：style=&quot;display: none;&quot;。<br />
  $(&quot;div:contains('abcd')&quot;).hide();</p>
<p>//
注意：contains的括号内输入的文本值是页面最终显示后的文本内容。所以括号中的内容不能当作HTML源代码使用。<br />
//例如：
<br />
  （1）、HTML源代码：&lt;p&gt;1234ab&amp;lt;br&amp;gt;cd4321&lt;/p&gt;<br />
  页面最终显示结果：<br />
  1234ab&lt;br&gt;cd4321
  <br />
  （2）、HTML源代码：&lt;p&gt;1234ab&lt;br&gt;cd4321&lt;/p&gt;<br />
  页面最终显示结果：<br />
1234ab<br />
cd4321<br />
那么，$(  &quot;p:contains('ab&lt;br&gt;cd')&quot;).hide();只作用于（1），不作用于（2）。</p>
<p><strong>6、获取某个直接子元素在其直接父元素中的索引号：</strong>索引号从0开始记数。</p>
<p>$(&quot;ul &gt; li&quot;).click(function () {<br />
  //prevAll([expr]): 查找当前元素之前所有的同辈元素<br />
  var index = $(this).prevAll().length;<br />
  alert(&quot;当前元素的索引号为：&quot;+index);<br />
  });</p>
<p><strong>7、如何判断某个元素是否存在：</strong>即使是隐藏起来的元素，也视为存在。</p>
<p>if ($('#eid').length) {<br />
  //当前元素是存在的<br />
}</p>
<p><strong>8、在jQuery中如何测试某个元素是否可见：</strong></p>
<p>if($(&quot;#eid&quot;).is(':visible')) {<br />
  //当前元素是可见的<br />
}</p>
<p><strong>9、如何把块元素放在屏幕的中心位置（元素屏幕居中）：</strong></p>
<p>jQuery.fn.center = function () { <br />
  　　return this.each(function(){<br />
  　　　　$(this).css({<br />
  　　　　　　position:'absolute',<br />
  　　　　　　top: ( $(window).height() - this.height() ) / 2 + $(window).scrollTop() + 'px', <br />
  　　　　　　left: ( $(window).width() - this.width() ) / 2 + $(window).scrollLeft() + 'px'<br />
  　　　　});<br />
  　　});<br />
  }<br />
  <br />
  //有了上面扩展之后，就可以像下面这样来使用上面的函数，达到元素屏幕居中的效果：<br />
$(element).center();</p>
<p><strong>10、使用closest来获取最先匹配的祖先元素：</strong></p>
<p>$('#eid).closest('div');</p>
<p><strong>11、如何使用Firebug和Firefox来记录jQuery事件日志：</strong></p>
<p>// 允许链式日志记录<br />
  jQuery.log = jQuery.fn.log = function (msg) {<br />
  if (console){<br />
  console.log(&quot;%s: %o&quot;, msg, this);<br />
  }<br />
  return this;//返回this目的是允许jQuery的链式操作<br />
  };<br />
  <br />
  // 用法示例：<br />
$('#eid').hide().log('eid元素被隐藏了').addClass('newClass');</p>
<p><strong>12、jQuery方式扩展String原型对象的方法：</strong></p>
<p>$.extend(String.prototype, {<br />
isPositiveInteger:function(){<br />
return (new RegExp(/^[1-9]\d*$/).test(this));<br />
},<br />
isInteger:function(){<br />
return (new RegExp(/^\d+$/).test(this));<br />
},<br />
isNumber: function(value, element) {<br />
return (new RegExp(/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/).test(this));<br />
},<br />
trim:function(){<br />
return this.replace(/(^\s*)|(\s*$)|\r|\n/g, &quot;&quot;);<br />
},<br />
trans:function() {<br />
return this.replace(/&amp;lt;/g, '&lt;').replace(/&amp;gt;/g,'&gt;').replace(/&amp;quot;/g, '&quot;');<br />
},<br />
replaceAll:function(os, ns) {<br />
return this.replace(new RegExp(os,&quot;gm&quot;),ns);<br />
},        skipChar:function(ch) {<br />
if (!this || this.length===0) {return '';}<br />
if (this.charAt(0)===ch) {return this.substring(1).skipChar(ch);}<br />
return this;<br />
},<br />
isValidPwd:function() {<br />
return (new RegExp(/^([_]|[a-zA-Z0-9]){6,32}$/).test(this)); <br />
},<br />
isValidMail:function(){<br />
return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(this.trim()));<br />
},<br />
isSpaces:function() {<br />
for(var i=0; i&lt;this.length; i+=1) {<br />
var ch = this.charAt(i);<br />
if (ch!=' '&amp;&amp; ch!=&quot;\n&quot; &amp;&amp; ch!=&quot;\t&quot; &amp;&amp; ch!=&quot;\r&quot;) {return false;}<br />
}<br />
return true;<br />
},<br />
isPhone:function() {<br />
return (new RegExp(/(^([0-9]{3,4}[-])?\d{3,8}(-\d{1,6})?$)|(^\([0-9]{3,4}\)\d{3,8}(\(\d{1,6}\))?$)|(^\d{3,8}$)/).test(this));<br />
},<br />
isUrl:function(){<br />
return (new RegExp(/^[a-zA-z]+:\/\/([a-zA-Z0-9\-\.]+)([-\w .\/?%&amp;=:]*)$/).test(this));<br />
},<br />
isExternalUrl:function(){<br />
return this.isUrl() &amp;&amp; this.indexOf(&quot;://&quot;+document.domain) == -1;<br />
}<br />
});</p>
<p><strong>13、设置上下文和提高性能：</strong></p>
<p> $(&quot;input:radio&quot;, document.forms[0]);<br />
性能上将优于：<br />
$(&quot;input:radio&quot;);</p>
<p><strong>14、获取鼠标光标的X和Y轴：</strong></p>
<p>&lt;p&gt;&lt;/p&gt;</p>
<p>$().mousemove(function(e){<br />
  $('p').html(&quot;X 坐标：&quot; + e.pageX + &quot; | Y 坐标：&quot; + e.pageY);<br />
});</p>
</body>
</html>
